<route lang="jsonc" type="page">
{
"style": {
"navigationBarTitleText": "视频减压",
"navigationBarBackgroundColor": "#45b7d1",
"navigationBarTextStyle": "white"
}
}
</route>

<script lang="ts" setup>
defineOptions({
  name: 'VideoRelax',
})

// 治愈视频数据
const healingVideos = ref([
  {
    id: 1,
    title: '海豚戏水',
    duration: '02:34',
    thumbnail: 'https://images.unsplash.com/photo-1544551763-46a013bb70d5?w=400',
    url: 'https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_1mb.mp4',
    category: '动物世界',
    description: '可爱的海豚在蓝色大海中自由嬉戏，治愈心灵',
    views: '1.2万',
    likes: 856,
  },
  {
    id: 2,
    title: '雨滴落叶',
    duration: '05:18',
    thumbnail: 'https://images.unsplash.com/photo-1428908728789-d2de25dbd4e2?w=400',
    url: 'https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_2mb.mp4',
    category: '自然景观',
    description: '细雨轻抚绿叶，大自然的宁静之美',
    views: '8.6千',
    likes: 634,
  },
  {
    id: 3,
    title: '星空延时',
    duration: '03:42',
    thumbnail: 'https://images.unsplash.com/photo-1446776877081-d282a0f896e2?w=400',
    url: 'https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_1mb.mp4',
    category: '天文奇观',
    description: '绚烂星空的延时摄影，感受宇宙的无限魅力',
    views: '2.1万',
    likes: 1203,
  },
  {
    id: 4,
    title: '花朵绽放',
    duration: '01:58',
    thumbnail: 'https://images.unsplash.com/photo-1470058869958-2a77ade41c02?w=400',
    url: 'https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_1mb.mp4',
    category: '植物生长',
    description: '花朵缓慢绽放的美妙过程，生命的奇迹',
    views: '1.5万',
    likes: 892,
  },
  {
    id: 5,
    title: '猫咪午睡',
    duration: '04:26',
    thumbnail: 'https://images.unsplash.com/photo-1574158622682-e40e69881006?w=400',
    url: 'https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_2mb.mp4',
    category: '萌宠日常',
    description: '慵懒的小猫咪在阳光下安然入睡',
    views: '3.8万',
    likes: 2156,
  },
  {
    id: 6,
    title: '云海翻腾',
    duration: '06:15',
    thumbnail: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400',
    url: 'https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_2mb.mp4',
    category: '自然景观',
    description: '山巅云海壮观景象，心旷神怡',
    views: '1.7万',
    likes: 945,
  },
])

// 当前播放的视频
const currentVideo = ref(null)
const showVideoPlayer = ref(false)

// 视频播放器上下文
let videoContext = null

// 播放视频
function playVideo(video: any) {
  currentVideo.value = video
  showVideoPlayer.value = true
}

// 关闭视频播放器
function closeVideoPlayer() {
  showVideoPlayer.value = false
  currentVideo.value = null
  if (videoContext) {
    videoContext.stop()
  }
}

// 点赞视频
function likeVideo(video: any) {
  video.likes++
  uni.showToast({
    title: '已点赞',
    icon: 'success',
  })
}

// 收藏视频
function favoriteVideo(video: any) {
  uni.showToast({
    title: '已收藏',
    icon: 'success',
  })
}

// 分享视频
function shareVideo(video: any) {
  uni.showShareMenu({
    withShareTicket: true,
    title: video.title,
    path: `/pages/relax/video/index?videoId=${video.id}`,
  })
}

// 视频准备就绪
function onVideoReady() {
  videoContext = uni.createVideoContext('video-player')
}

onMounted(() => {
  nextTick(() => {
    if (showVideoPlayer.value) {
      onVideoReady()
    }
  })
})
</script>

<template>
  <view class="video-relax-container">
    <!-- 顶部说明 -->
    <view class="header-section">
      <view class="header-title">
        视频减压
      </view>
      <view class="header-desc">
        观看治愈视频，让心情变得轻松愉悦
      </view>
    </view>

    <!-- 视频列表 -->
    <view class="video-list">
      <view
        v-for="video in healingVideos"
        :key="video.id"
        class="video-card"
        @click="playVideo(video)"
      >
        <view class="video-thumbnail-container">
          <image
            :src="video.thumbnail"
            mode="aspectFill"
            class="video-thumbnail"
          />
          <view class="play-overlay">
            <view class="play-button">
              <view class="i-mdi-play" />
            </view>
          </view>
          <view class="duration-badge">
            {{ video.duration }}
          </view>
        </view>

        <view class="video-info">
          <view class="video-title">
            {{ video.title }}
          </view>
          <view class="video-meta">
            <text class="video-category">{{ video.category }}</text>
            <text class="video-views">{{ video.views }}次播放</text>
          </view>
          <view class="video-description">
            {{ video.description }}
          </view>

          <view class="video-actions">
            <view class="action-item" @click.stop="likeVideo(video)">
              <view class="action-icon i-mdi-thumb-up" />
              <text class="action-text">{{ video.likes }}</text>
            </view>
            <view class="action-item" @click.stop="favoriteVideo(video)">
              <view class="action-icon i-mdi-heart" />
              <text class="action-text">收藏</text>
            </view>
            <view class="action-item" @click.stop="shareVideo(video)">
              <view class="action-icon i-mdi-share-variant" />
              <text class="action-text">分享</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 视频播放器弹窗 -->
    <view v-if="showVideoPlayer && currentVideo" class="video-modal" @click="closeVideoPlayer">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <view class="modal-title">
            {{ currentVideo.title }}
          </view>
          <view class="modal-close" @click="closeVideoPlayer">
            ×
          </view>
        </view>

        <view class="video-player-container">
          <video
            id="video-player"
            :src="currentVideo.url"
            :poster="currentVideo.thumbnail"
            controls
            autoplay
            class="video-player"
            @ready="onVideoReady"
          />
        </view>

        <view class="modal-info">
          <view class="video-details">
            <view class="detail-item">
              <text class="detail-label">分类：</text>
              <text class="detail-value">{{ currentVideo.category }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">时长：</text>
              <text class="detail-value">{{ currentVideo.duration }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">播放量：</text>
              <text class="detail-value">{{ currentVideo.views }}</text>
            </view>
          </view>

          <view class="video-description-full">
            {{ currentVideo.description }}
          </view>

          <view class="modal-actions">
            <button class="modal-btn like-btn" @click="likeVideo(currentVideo)">
              <view class="i-mdi-thumb-up" />
              <text>{{ currentVideo.likes }}</text>
            </button>
            <button class="modal-btn favorite-btn" @click="favoriteVideo(currentVideo)">
              <view class="i-mdi-heart" />
              <text>收藏</text>
            </button>
            <button class="modal-btn share-btn" @click="shareVideo(currentVideo)">
              <view class="i-mdi-share-variant" />
              <text>分享</text>
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.video-relax-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #45b7d1 0%, #5ac8ed 100%);
  padding-bottom: env(safe-area-inset-bottom);
}

// 顶部区域
.header-section {
  text-align: center;
  padding: 40rpx 30rpx;
  color: #fff;
}

.header-title {
  font-size: 44rpx;
  font-weight: 700;
  margin-bottom: 16rpx;
  text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}

.header-desc {
  font-size: 28rpx;
  opacity: 0.9;
  text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.2);
}

// 视频列表
.video-list {
  padding: 0 30rpx;
}

.video-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24rpx;
  margin-bottom: 30rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.98);
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
  }
}

.video-thumbnail-container {
  position: relative;
  width: 100%;
  height: 400rpx;
}

.video-thumbnail {
  width: 100%;
  height: 100%;
}

.play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  transition: opacity 0.2s ease;
}

.play-button {
  width: 120rpx;
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  font-size: 48rpx;
  color: #45b7d1;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);

  view {
    width: 48rpx;
    height: 48rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.duration-badge {
  position: absolute;
  bottom: 20rpx;
  right: 20rpx;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 8rpx 16rpx;
  border-radius: 12rpx;
  font-size: 22rpx;
}

.video-info {
  padding: 30rpx;
}

.video-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 12rpx;
  line-height: 1.4;
}

.video-meta {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-bottom: 16rpx;
}

.video-category {
  background: #e3f2fd;
  color: #1976d2;
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
  font-size: 22rpx;
}

.video-views {
  font-size: 24rpx;
  color: #999;
}

.video-description {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
  margin-bottom: 20rpx;
}

.video-actions {
  display: flex;
  justify-content: space-around;
  padding-top: 20rpx;
  border-top: 1rpx solid #f0f0f0;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
  padding: 12rpx;
  border-radius: 12rpx;
  transition: background-color 0.2s ease;

  &:active {
    background: #f9f9f9;
  }
}

.action-icon {
  font-size: 32rpx;
  width: 32rpx;
  height: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-text {
  font-size: 22rpx;
  color: #666;
}

// 视频播放器弹窗
.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  width: 95%;
  max-width: 750rpx;
  max-height: 90vh;
  background: #fff;
  border-radius: 24rpx;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  background: #f8f9fa;
  border-bottom: 1rpx solid #e9ecef;
}

.modal-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  flex: 1;
  margin-right: 20rpx;
}

.modal-close {
  font-size: 40rpx;
  color: #999;
  cursor: pointer;

  &:hover {
    color: #333;
  }
}

.video-player-container {
  position: relative;
  width: 100%;
  height: 400rpx;
}

.video-player {
  width: 100%;
  height: 100%;
}

.modal-info {
  padding: 30rpx;
  max-height: 300rpx;
  overflow-y: auto;
}

.video-details {
  margin-bottom: 20rpx;
}

.detail-item {
  display: flex;
  margin-bottom: 12rpx;
}

.detail-label {
  font-size: 26rpx;
  color: #999;
  width: 120rpx;
}

.detail-value {
  font-size: 26rpx;
  color: #333;
  flex: 1;
}

.video-description-full {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 30rpx;
}

.modal-actions {
  display: flex;
  gap: 20rpx;
}

.modal-btn {
  flex: 1;
  height: 80rpx;
  border: none;
  border-radius: 12rpx;
  font-size: 28rpx;
  font-weight: 500;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;

  &.like-btn {
    background: #ff6b6b;
    color: #fff;

    &:active {
      background: #ff5252;
    }
  }

  &.favorite-btn {
    background: #f39c12;
    color: #fff;

    &:active {
      background: #e67e22;
    }
  }

  &.share-btn {
    background: #f5f5f5;
    color: #666;

    &:active {
      background: #e9ecef;
    }
  }
}
</style>
